<template>
	<view>
		<view v-if="active.active_id " class="container">
			<!-- 滚动容器 -->
			<scroll-view class="scroll-container" @scroll="onScrollEvent"  scroll-y="true">
<!-- :scroll-top="scrollTop" -->
				<!-- 商品图片 -->
				<view class="goods-swiper">
					<swiper autoplay=" autoplay " @change="setCurrent" class="banner-box  swiper-box" :duration="duration"
					 :indicator-dots="indicatorDots" :interval="interval" circular="true">
						<swiper-item v-for=" (item,index) in goods.image " :key="index" @tap="onPreviewImages" :data-index="index">
							<image class="slide-image" mode="aspectFill" :src=" item.file_path "></image>
						</swiper-item>
					</swiper>
					<view class="banner-num">
						<text>{{ currentIndex }}</text>
						<text>/</text>
						<text>{{ goods.image.length }}</text>
					</view>
				</view>
				<!-- 商品信息 -->
				<view class="goods-info m-top20">
					<!-- 价格、销量 -->
					<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
						<view class="block-left dis-flex flex-y-end">
							<view class="active-tag">
								<text>限时秒杀</text>
							</view>
							<!-- 秒杀价 -->
							<text class="floor-price__samll">￥</text>
							<text class="floor-price">{{ goods.goods_sku.seckill_price }}</text>
							<!-- 原价 -->
							<text class="original-price">￥{{ goods.goods_sku.original_price }}</text>
						</view>
						<view class="block-right dis-flex">
							<!-- 销量 -->
							<view class="goods-sales">
								<text>已抢{{ active.sales_actual }}件</text>
							</view>
						</view>
					</view>
					<!-- 标题、分享 -->
					<view class="info-item info-item__name dis-flex flex-y-center">
						<view class="goods-name flex-box">
							<text class="twolist-hidden">{{ goods.goods_name }}</text>
						</view>
						<view class="goods-share__line"></view>
						<view class="goods-share">
							<form @submit="onClickShare" report-submit="true">
								<button form-type="submit" class="share-btn dis-flex flex-dir-column">
									<text class="share__icon iconfont icon-fenxiang"></text>
									<text class="f-24">分享</text>
								</button>
							</form>
						</view>
					</view>
					<!-- 商品卖点 -->
					<view v-if=" goods.selling_point " class="info-item info-item_selling-point">
						<text>{{ goods.selling_point }}</text>
					</view>
					<!-- 活动倒计时 -->
					<view v-if=" active.active_status != ActiveStatusEnum.STATE_END.value " class="info-item info-item_status info-item_countdown">
						<text class="countdown-icon iconfont icon-naozhong"></text>
						<block v-for=" (item,index) in actEndTimeList " :key="index">
							<text>距离秒杀{{ active.active_status == ActiveStatusEnum.STATE_SOON.value ? '开始' : '结束' }} 还剩{{ item.dynamic.hou }}时{{ item.dynamic.min }}分{{ item.dynamic.sec }}秒</text>
						</block>
					</view>
					<!-- 活动已结束 -->
					<view v-else class="info-item info-item_status info-item_end">
						<text class="countdown-icon iconfont icon-naozhong"></text>
						<text>秒杀活动已结束，下次记得早点来哦~</text>
					</view>
				</view>

				<!-- 商品评价 goods.comment_data.length-->
				<view class="goods-comment m-top20 b-f" v-if="goods.comment_data">
					<view class="item-title dis-flex">
						<view class="block-left flex-box">
							<text>评价 ({{ goods.comment_data_count }}条)</text>
						</view>
						<view class="block-right">
							<text @tap="onTargetToComment" class="show-more col-9">查看更多</text>
							<text class="iconfont icon-xiangyoujiantou"></text>
						</view>
					</view>
					<!-- 评论列表 -->
					<view class="comment-list">
						<view class="comment-item" v-for=" (item,index) in goods.comment_data " :key="index">
							<view class="comment-item_row dis-flex flex-y-center">
								<view class="user-info dis-flex flex-y-center">
									<image class="avatar" :src=" item.user.avatarUrl "></image>
									<text class="user-name">{{ item.user.nickName }}</text>
								</view>
								<view class="star-rating">
									<text class="star-icon iconfont icon-shoucang active"></text>
									<block v-if="item.score < 30">
										<text class="star-icon iconfont icon-shoucang active"></text>
										<text class="star-icon iconfont icon-shoucang active"></text>
									</block>
									<block v-if="item.score < 20">
										<text class="star-icon iconfont icon-shoucang active"></text>
										<text class="star-icon iconfont icon-shoucang active"></text>
									</block>
								</view>
							</view>
							<view class="goods-comment-cont m-top20">
								<text class="f-26 twolist-hidden">{{ item.content }}</text>
							</view>
							<view class="f-22 col-9 m-top10">{{ item.create_time }}</view>
						</view>
					</view>
				</view>

				<!-- 商品描述 -->
				<view class="goods-content m-top20">
					<view class="item-title b-f">
						<text>商品描述</text>
					</view>
					<block v-if="goods.content != ''">
						<view class="goods-content__detail b-f">
							<!-- <template is="wxParse" data="{{ wxParseData:content.nodes }}"></template> -->
							<rich-text :nodes="article"></rich-text>
						</view>
					</block>
					<block v-else>
						<view class="yoshop-notcont">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">亲，暂无商品描述</text>
						</view>
					</block>
				</view>
			</scroll-view>

			<!-- 底部选项卡 -->
			<view class="footer-fixed">
				<view class="footer-container dis-flex">
					<!-- 导航图标 -->
					<view class="foo-item-fast dis-flex flex-x-center flex-y-center">
						<form @submit="onTargetHome" report-submit>
							<button class="btn-normal" form-type="submit">
								<view class="fast-item fast-item_home">
									<view class="fast-icon">
										<text class="iconfont icon-shouye"></text>
									</view>
									<view class="fast-text">
										<text>首页</text>
									</view>
								</view>
							</button>
						</form>
						
						<!-- #ifdef MP-WEIXIN -->
						<button class="btn-normal" open-type="contact" >
							<view class="fast-item">
								<view class="fast-icon">
									<text class="iconfont icon-kefu1"></text>
								</view>
								<view class="fast-text">
									<text>客服</text>
								</view>
							</view>
						</button>
					<!-- #endif -->
					
					<!-- #ifdef APP-PLUS  || H5-->
					<button class="btn-normal">
						<view class="fast-item" @tap="openkefu">
							<view class="fast-icon">
								<text class="iconfont icon-kefu1"></text>
							</view>
							<view class="fast-text">
								<text>客服</text>
							</view>
						</view>
					</button>
					<!-- #endif -->
					</view>
					<!-- 操作按钮 -->
					<view class="foo-item-trigger flex-box">
						<form @submit="onToggleTrade" report-submit>
							<button v-if="active.active_status == ActiveStatusEnum.STATE_BEGIN.value" class="opt-btn btn-main btn-normal"
							 form-type="submit">
								<text>立即购买</text>
							</button>
							<button v-else class="opt-btn btn-gray btn-normal">
								<text>{{ active.active_status == ActiveStatusEnum.STATE_SOON.value ? '活动未开始' : '活动已结束' }}</text>
							</button>
						</form>
					</view>
				</view>
			</view>

			<!-- 分享按钮 -->
			<zanactionsheet :show="share.show" :actions="share.actions" :cancel-text="share.cancelText" :cancel-with-mask="share.cancelWithMask"
			 @cancel="onCloseShare" @actionclick="onClickShareItem" mask-class="tiny" />

			<!-- 商品海报 弹出层 -->
			<view class="pop pop--bottom" :class="[share.showPopup ? 'pop--show' : '']" @close="onTogglePopup">
				<view class="pop__mask" @tap="onTogglePopup"></view>

				<view class="pop-poster pop-example__container pop__container" style="bottom: 10%;">
					<!-- 关闭按钮 -->
					<view class="pop-close dis-flex flex-x-center flex-y-center" @tap="onTogglePopup">
						<text class="iconfont icon-shanchu f-30 col-9"></text>
					</view>
					<form @submit="onSavePoster" report-submit="true">
						<view class="poster__image">
							<image mode="widthFix" :src="qrcode"></image>
						</view>
						<view class="poster__tips m-top10 t-c">
						</view>
						<view class="padding-box m-top10 profile-btn">
							<button form-type="submit">保存图片</button>
						</view>
					</form>
				</view>
			</view>

			<!-- 确认购买弹窗 -->
			<!-- <zan-popup show=" showBottomPopup " type="bottom" bindclose="onToggleTrade"> -->
			<view class="pop pop--bottom" :class="[showBottomPopup ? 'pop--show' : '']" @close="onToggleTrade">
				<view class="pop__mask " @tap="handleMaskClick"></view>
				<view class="pop__container">
					<view class="popup__trade">
						<!-- 关闭按钮 -->
						<view class="trade-close dis-flex flex-x-center flex-y-center" @tap="onToggleTrade">
							<text class="iconfont icon-close f-26"></text>
						</view>
						<!-- 主体信息 -->
						<view class="trade-main">
							<view class="goods-info dis-flex">
								<!-- 图片名称 -->
								<view class="goods-image" @tap="onPreviewSkuImage">
									<image :src="skuCoverImage"></image>
								</view>
								<view class="block-right flex-box">
									<view class="block-item dis-flex flex-y-end">
										<!-- 商品价 -->
										<view class="goods-price col-m">
											<text class="f-26">￥</text>
											<text class="f-36">{{ goods.goods_sku.seckill_price }}</text>
										</view>
										<!-- 划线价 -->
										<view class="line-price" v-if=" original_price > 0 ">
											<text>{{ goods.goods_sku.original_price }}</text>
										</view>
									</view>
									<view class="goods-stock dis-flex flex-x-between">
										<text class="f-26 col-7">库存：{{ seckill_stock }}</text>
										<text v-if=" goods.limit_num > 0 " class="f-26 col-7">限购：{{ goods.limit_num }}件</text>
									</view>
								</view>
							</view>
							<!-- 规格列表 -->
							<view class="goods-attr">
								<!-- 滚动容器 -->
								<scroll-view class="goods-attr--scroll" scroll-y=" true ">
									<view class="group-item" v-for="(attr,indexx) in goodsMultiSpec.spec_attr " v-for-item="attr" v-for-index="indexx"
									 :key="indexx">
										<view class="tips-text" :data-id="attr.group_id">{{ attr.group_name }}</view>
										<view class="spec-item" :class=" [item.checked ? 'cur' : ''] " v-for=" (item,indexs) in attr.spec_items "
										 v-for-index="indexs" :key="indexs" :data-attr-idx=" indexs " :data-item-idx=" indexs " @tap="onSwitchSpec">{{ item.spec_value }}</view>
									</view>
								</scroll-view>
							</view>
							<!-- 购买数量 -->
							<view class="goods-number">
								<view class="tips-text">
									<text>购买数量</text>
								</view>
								<view class="select-number">
									<form @submit="onDecGoodsNumber" report-submit="true">
										<button form-type="submit" class="default" :class=" [goods_num > 1 ? '' : 'disabled' ] " type="default">-</button>
									</form>
									<input @input="onInputGoodsNum" type="number" :value=" goods_num "></input>
									<form @submit="onIncGoodsNumber" report-submit="true">
										<button form-type="submit" class="default" type="default">+</button>
									</form>
								</view>
							</view>
						</view>
						<!-- 底部操作栏 -->
						<view class="footer-fixed f-30">
							<view v-if=" seckill_stock > 0 " class="flex-box">
								<form @submit="onCheckout" report-submit>
									<button class="opt-btn btn-main btn-normal" form-type="submit">
										<text>确定</text>
									</button>
								</form>
							</view>
							<view class="flex-box opt-btn btn-gray" v-else>暂无现货</view>
						</view>
					</view>
					</zan-popup>

					<!-- 快捷导航 -->
					<shortcut bottom="120upx"></shortcut>

					<!-- 返回顶部 -->
					<!-- 返回顶部 -->
					<view @tap="onScrollTop" class="widget-goTop" v-if=" showTopWidget ">
						<text class="iconfont icon-fanhuidingbu"></text>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// const App = getApp();	
	// 富文本插件

	// 工具类
	import util from '../../../utils/util.js';

	// 倒计时插件
	import CountDown from '../../../utils/countdown.js';

	// 枚举类：秒杀活动商品状态
	import ActiveStatusEnum from '../../../utils/enum/sharp/GoodsStatus.js';

	// 记录规格的数组
	let goodsSpecArr = [];
	export default {
		computed: {

		},
		data() {
			return {
				indicatorDots: true, // 是否显示面板指示点
				autoplay: true, // 是否自动切换
				interval: 3000, // 自动切换时间间隔
				duration: 800, // 滑动动画时长

				currentIndex: 1, // 轮播图指针
				floorstatus: false, // 返回顶部

				seckill_price: 0, // 商品价格
				original_price: 0, // 商品原价
				seckill_stock: 0, // 库存数量

				goods_num: 1, // 商品数量
				goods_sku_id: 0, // 规格id
				cart_total_num: 0, // 购物车商品总数量
				goodsMultiSpec: {}, // 多规格信息
				active_time_id: '',
				sharp_goods_id: '',
				skuCoverImage:'',


				showBottomPopup: null,
				ActiveStatusEnum, // 秒杀活动商品状态

				// 分享按钮组件
				share: {
					show: false,
					cancelWithMask: true,
					cancelText: '关闭',
					actions: [{
						name: '生成商品海报',
						className: 'action-class',
						loading: false
					}, {
						name: '发送给朋友',
						openType: 'share'
					}],
					// 商品海报
					showPopup: false,
				},
				article: '',

				// 返回顶部
				showTopWidget: false,

				// 倒计时
				actEndTimeList: [],

				active: {}, // 秒杀活动详情
				goods: {}, // 商品详情

			}
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {

		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let _this = this;
			let scene = _this.getSceneData(options);
			// 秒杀商品id
			_this.setData({
				active_time_id: options.active_time_id ? options.active_time_id : scene.aid,
				sharp_goods_id: options.sharp_goods_id ? options.sharp_goods_id : scene.gid,
			});
			// 获取秒杀商品信息
			_this.getActiveDetail();
		},
		methods: {

			/**
			 * 获取秒杀商品信息
			 */
			getActiveDetail() {
				let _this = this;
				_this._get('sharp.goods/detail', {
					active_time_id: _this.active_time_id,
					sharp_goods_id: _this.sharp_goods_id,
				}, (result) => {
					// 初始化详情数据
					let data = _this._initData(result.data);
					_this.setData(data);
					console.log(data);
					// 执行倒计时
					CountDown.onSetTimeList(_this, 'actEndTimeList');
				});
			},

			/**
			 * 初始化详情数据
			 */
			_initData(data) {
				let _this = this;
				// 商品详情
				let goodsDetail = data.goods;
				// 富文本转码
				if (goodsDetail.content.length > 0) {
					// wxParse.wxParse('content', 'html', goodsDetail.content, _this, 0);
					let article = goodsDetail.content.replace(/<img/g, "<img style='max-width:100%;height:auto;'");
					_this.setData({
						'article': article
					});
				}
				// 商品价格/划线价/库存
				data.goods_sku_id = goodsDetail.goods_sku.spec_sku_id;
				data.seckill_price = goodsDetail.goods_sku.seckill_price;
				data.original_price = goodsDetail.goods_sku.original_price;
				data.seckill_stock = goodsDetail.goods_sku.seckill_stock;
				// 商品封面图(确认弹窗)
				data.skuCoverImage = goodsDetail.goods_image;
				// 多规格商品封面图(确认弹窗)
				if (goodsDetail.spec_type == 20 && goodsDetail.goods_sku['image']) {
					data.skuCoverImage = goodsDetail.goods_sku['image']['file_path'];
				}
				// 初始化商品多规格
				if (goodsDetail.spec_type == 20) {
					data.goodsMultiSpec = _this._initManySpecData(goodsDetail.goods_multi_spec);
				}
				// 记录活动到期时间
				data.actEndTimeList = [{
					date: data.active.active_status == ActiveStatusEnum.STATE_SOON.value ?
						data.active.start_time : data.active.end_time
				}];
				return data;
			},

			/**
			 * 初始化商品多规格
			 */
			_initManySpecData(data) {
				goodsSpecArr = [];
				for (let i in data.spec_attr) {
					for (let j in data.spec_attr[i].spec_items) {
						if (j < 1) {
							data.spec_attr[i].spec_items[0].checked = true;
							goodsSpecArr[i] = data.spec_attr[i].spec_items[0].item_id;
						}
					}
				}
				return data;
			},

			/**
			 * 点击切换不同规格
			 */
			onSwitchSpec(e) {
				let _this = this,
					attrIdx = e.currentTarget.dataset.attrIdx,
					itemIdx = e.currentTarget.dataset.itemIdx,
					goodsMultiSpec = _this.goodsMultiSpec;
				// 记录formid
				_this.saveFormId(e.detail.formId);
				for (let i in goodsMultiSpec.spec_attr) {
					for (let j in goodsMultiSpec.spec_attr[i].spec_items) {
						if (attrIdx == i) {
							goodsMultiSpec.spec_attr[i].spec_items[j].checked = false;
							if (itemIdx == j) {
								goodsMultiSpec.spec_attr[i].spec_items[itemIdx].checked = true;
								goodsSpecArr[i] = goodsMultiSpec.spec_attr[i].spec_items[itemIdx].item_id;
							}
						}
					}
				}
				_this.setData({
					goodsMultiSpec
				});
				// 更新商品规格信息
				_this._updateSpecGoods();
			},

			/**
			 * 更新商品规格信息
			 */
			_updateSpecGoods() {
				let _this = this,
					specSkuId = goodsSpecArr.join('_');
				// 查找skuItem
				let spec_list = _this.goodsMultiSpec.spec_list,
					skuItem = spec_list.find((val) => {
						return val.spec_sku_id == specSkuId;
					});
				// 记录goods_sku_id
				// 更新商品价格、划线价、库存
				if (typeof skuItem === 'object') {
					_this.setData({
						goods_sku_id: skuItem.spec_sku_id,
						seckill_price: skuItem.form.seckill_price,
						original_price: skuItem.form.original_price,
						seckill_stock: skuItem.form.seckill_stock,
						skuCoverImage: skuItem.form.image_id > 0 ? skuItem.form.image_path : _this.goods.goods_image
					});
				}
			},

			/**
			 * 设置轮播图当前指针 数字
			 */
			setCurrent(e) {
				let _this = this;
				_this.setData({
					currentIndex: e.detail.current + 1
				});
			},

			/**
			 * 浏览商品图片
			 */
			onPreviewImages(e) {
				let _this = this;
				let index = e.currentTarget.dataset.index,
					imageUrls = [];
				_this.goods.image.forEach(item => {
					imageUrls.push(item.file_path);
				});
				uni.previewImage({
					current: imageUrls[index],
					urls: imageUrls
				})
			},

			/**
			 * 预览Sku规格图片
			 */
			onPreviewSkuImage(e) {
				let _this = this;
				uni.previewImage({
					current: _this.skuCoverImage,
					urls: [_this.skuCoverImage]
				})
			},

			/**
			 * 跳转到评论
			 */
			onTargetToComment() {
				let _this = this;
				uni.navigateTo({
					url: '../../goods/comment/comment?goods_id=${_this.goods.goods_id}'
				});
			},

			/**
			 * 返回顶部
			 */
			onScrollTop(t) {
				let _this = this;
				_this.setData({
					scrollTop: 0
				});
			},

			/**
			 * 显示/隐藏 返回顶部按钮
			 */
			onScrollEvent(e) {
				let _this = this;
				_this.setData({
					showTopWidget: e.detail.scrollTop > 200
				})
			},

			/**
			 * 显示分享选项
			 */
			onClickShare(e) {
				let _this = this;
				// #ifdef APP-PLUS || H5
					uni.showActionSheet({
						itemList: ['生成商品海报', '发送给朋友'],
						success: function (res) {
							_this.toShare(res.tapIndex)
						},
					})
					return;
				// #endif
				this.setData({
					'share.show': true
				});
			},
			/* 
			* 用户点击了分享 
			 */
			toShare(e){
				let _this = this;
				if (e == 0) {//分享到海报
				
					let goodsinfo = {
						"goods_trueprice": _this.goods_price, 
						"goods_image": _this.detail.goods_image,
						"goods_name": _this.detail.goods_name,
						"goods_id": _this.detail.goods_id, 
					};
					uni.setStorageSync('goodsinfo', goodsinfo);
				
					uni.navigateTo({
						url:'../../../pages/poster/index?posterType=goods'
					})
				}else{//分享到微信
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: uni.getStorageSync('versionInfo').url,
					title: _this.detail.goods_name,
					summary: _this.detail.goods_name,
					imageUrl: _this.detail.selling_point,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
				}
			},

			/**
			 * 关闭分享选项
			 */
			onCloseShare() {
				let _this = this;
				_this.setData({
					'share.show': false
				});
			},

			/**
			 * 点击生成商品海报
			 */
			onClickShareItem(e) {
				let _this = this;
				if (e.detail.index === 0) {
					// 显示商品海报
					_this._showPoster();
				}
				_this.onCloseShare();
			},

			/**
			 * 切换商品海报
			 */
			onTogglePopup() {
				let _this = this;
				_this.setData({
					'share.showPopup': !_this.share.showPopup
				});
			},

			/**
			 * 显示商品海报图
			 */
			_showPoster() {
				let _this = this;
				uni.showLoading({
					title: '加载中',
				});
				_this._get('sharp.goods/poster', {
					active_time_id: _this.active_time_id,
					sharp_goods_id: _this.sharp_goods_id,
				}, (result) => {
					_this.setData(result.data, () => {
						_this.onTogglePopup();
					});
				}, null, () => {
					uni.hideLoading();
				});
			},

			/**
			 * 保存海报图片
			 */
			onSavePoster(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				uni.showLoading({
					title: '加载中',
				});
				// 下载海报图片
				uni.downloadFile({
					url: _this.qrcode,
					success(res) {
						uni.hideLoading();
						// 图片保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(data) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
								// 关闭商品海报
								_this.onTogglePopup();
							},
							fail(err) {
								console.log(err.errMsg);
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showToast({
										title: "请允许访问相册后重试",
										icon: "none",
										duration: 1000
									});
									setTimeout(() => {
										uni.openSetting();
									}, 1000);
								}
							},
							complete(res) {
								console.log('complete');
								// uni.hideLoading();
							}
						})
					}
				})
			},

			/**
			 * 增加商品数量
			 */
			onIncGoodsNumber(e) {
				let _this = this;
				_this.saveFormId(e.detail.formId);
				_this.setData({
					goods_num: ++_this.goods_num
				})
			},

			/**
			 * 减少商品数量
			 */
			onDecGoodsNumber(e) {
				let _this = this;
				_this.saveFormId(e.detail.formId);
				if (_this.goods_num > 1) {
					_this.setData({
						goods_num: --_this.goods_num
					});
				}
			},

			/**
			 * 自定义输入商品数量
			 */
			onInputGoodsNum(e) {
				let _this = this,
					iptValue = e.detail.value;
				if (!util.isPositiveInteger(iptValue) && iptValue !== '') {
					iptValue = 1;
				}
				_this.setData({
					goods_num: iptValue
				});
			},

			/**
			 * 确认购买弹窗
			 */
			onToggleTrade(e) {

				let _this = this;
				if (typeof e === 'object') {
					// 记录formId
					e.detail.hasOwnProperty('formId') && _this.saveFormId(e.detail.formId);
				}
				_this.setData({
					showBottomPopup: !_this.showBottomPopup
				});

			},

			/**
			 * 确认购买
			 */
			onCheckout(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 表单验证
				if (!_this._onVerify()) {
					return false;
				}
				// 立即购买
				uni.navigateTo({
					url: '../../flow/checkout?' + util.urlEncode({
						order_type: 'sharp',
						active_time_id: _this.active_time_id,
						sharp_goods_id: _this.sharp_goods_id,
						goods_sku_id: _this.goods_sku_id,
						goods_num: _this.goods_num,
					}),
					success() {
						// 关闭弹窗
						_this.onToggleTrade();
					}
				});
			},

			/**
			 * app客服
			 */
			openkefu: function() {
				let url = 'mqqwpa://im/chat?chat_type=crm&uin=' + this.getQQkefu()
				this.openBrowser(url);
			},
			/**
			 * 表单验证
			 */
			_onVerify() {
				let _this = this;
				if (_this.goods_num === '') {
					_this.showError('请输入购买数量');
					return false;
				}
				// 将购买数量转为整型，防止出错
				_this.setData({
					goods_num: parseInt(_this.goods_num)
				});
				if (_this.goods_num <= 0) {
					_this.showError('购买数量不能为0');
					return false;
				}
				// 判断限购数量
				return true;
			},

			/**
			 * 跳转到首页
			 */
			onTargetHome(e) {
				// 记录formid
				_this.saveFormId(e.detail.formId);
				uni.switchTab({
					url: '../../index/index',
				})
			},

			/**
			 * 用户点击右上角分享
			 */
			onShareAppMessage() {
				let _this = this;
				// 构建页面参数
				let params = _this.getShareUrlParams({
					active_time_id: _this.active_time_id,
					sharp_goods_id: _this.sharp_goods_id,
				});
				return {
					title: _this.detail.goods_name,
					path: `/pages/sharp/goods/index?${params}`
				};
			},

		}
	}
</script>

<style>
	/* wxParse.wxss */

	.container {
		padding-bottom: 112upx;
	}

	.slide-image {
		background: #fff;
	}

	.banner-box {
		height: 750upx;
	}

	/* banner计数 */

	.banner-num {
		position: absolute;
		right: 30upx;
		margin-top: -70upx;
		padding: 2upx 18upx;
		background: rgba(0, 0, 0, 0.363);
		border-radius: 50upx;
		color: #fff;
		font-size: 26upx;
	}

	/* 商品信息 */

	.goods-info {
		background: #fff;
		padding: 25upx 30upx;
	}

	.info-item__top {
		height: 54upx;
		margin-bottom: 30upx;
	}

	.info-item__top .active-tag {
		width: 108upx;
		color: #fff;
		background: #fe293f;
		padding: 3upx 5upx;
		border-radius: 15upx;
		font-size: 24upx;
		text-align: center;
		margin-right: 15upx;
	}

	.floor-price__samll {
		font-size: 26upx;
		line-height: 1;
		color: #fe293f;
	}

	/* 砍价底价 */

	.floor-price {
		color: #fe293f;
		margin-right: 15upx;
		font-size: 38upx;
		line-height: 1;
		margin-bottom: -2upx;
	}

	.original-price {
		font-size: 24upx;
		line-height: 1;
		text-decoration: line-through;
		color: #959595;
	}

	.goods-sales {
		font-size: 24upx;
		color: #959595;
	}

	.info-item__name .goods-name {
		font-size: 28upx;
	}

	/* 商品分享 */

	.goods-share__line {
		border-left: 1upx solid #f4f4f4;
		height: 60upx;
		margin: 0 30upx;
	}

	.goods-share .share-btn {
		line-height: normal;
		padding: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
		font-size: 8pt;
		border: none;
		color: #191919;
	}

	.goods-share .share-btn::after {
		border: none;
	}

	.goods-share .share__icon {
		font-size: 40upx;
		margin-bottom: 5upx;
	}

	/* 商品卖点 */

	.info-item_selling-point {
		margin-top: 15upx;
		font-size: 24upx;
		color: #808080;
	}

	/* 活动状态 */

	.info-item_status {
		margin-top: 20upx;
		padding: 15upx 20upx;
		font-size: 24upx;
		border-radius: 6upx;
	}

	.info-item_status .countdown-icon {
		font-size: 28upx;
		margin-right: 15upx;
	}

	/* 活动倒计时 */

	.info-item_countdown {
		background: #f0f9ff;
		color: #8f8f8f;
	}

	.info-item_countdown .countdown-icon {
		color: #1397d8;
	}

	/* 活动已结束 */

	.info-item_end {
		background: #ccc;
		color: #fff;
	}

	/* sku选择器 */

	.sku-selector {
		padding: 25upx 30upx;
	}

	.item-title {
		font-size: 28upx;
	}

	/* 商品评论 */

	.goods-comment {
		padding: 20upx 30upx;
	}

	.goods-comment .item-title {
		font-size: 28upx;
		margin-bottom: 30upx;
	}

	.goods-comment .item-title .show-more {
		margin-right: 8upx;
		font-size: 26upx;
	}

	.comment-item {
		padding: 0 5upx;
	}

	.user-info {
		margin-right: 15upx;
	}

	.user-info .avatar {
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
		margin-right: 10upx;
	}

	.user-name {
		font-size: 24upx;
	}

	.star-rating .star-icon {
		padding-right: 6upx;
		color: #ccc;
		font-size: 26upx;
	}

	.star-rating .star-icon.active {
		color: #f4a213;
	}

	.goods-comment-cont {
		font-size: 30upx;
		color: #333;
		margin: 12upx 0;
	}

	/* 商品详情 */

	.goods-content .item-title {
		padding: 20upx 30upx;
	}

	/* 返回顶部 */

	.widget-goTop {
		bottom: 210upx;
	}

	/* 底部操作栏 */

	.footer-fixed {
		height: 92upx;
	}

	.footer-container {
		width: 100%;
	}

	.foo-item-fast {
		box-sizing: border-box;
		width: 256upx;
		line-height: 1;
	}

	.fast-item {
		padding: 0 10upx;
		line-height: 1;
	}

	.fast-item .fast-icon {
		margin-bottom: 6upx;
	}

	.fast-item.fast-item_home {
		margin-right: 30upx;
	}

	.foo-item-fast .fast-icon {
		font-size: 46upx;
	}

	.foo-item-fast .fast-text {
		font-size: 24upx;
	}

	/* 确认购买弹窗 */

	.popup__trade {
		width: 750upx;
		position: relative;
		padding-bottom: 92upx;
		z-index: 999;
	}

	.popup__trade .trade-close {
		position: absolute;
		top: 20upx;
		right: 20upx;
		width: 50upx;
		height: 50upx;
	}

	.popup__trade .trade-main {
		background: #fff;
		box-sizing: border-box;
		padding: 30upx 25upx;
	}

	.popup__trade .footer-fixed {
		position: absolute;
		box-shadow: none;
	}

	.popup__trade .trade-main .goods-info {
		padding: 0;
	}

	.popup__trade .trade-main .goods-info .goods-image {
		margin-top: -80upx;
		margin-right: 20upx;
	}

	.popup__trade .trade-main .goods-info .goods-image image {
		width: 180upx;
		height: 180upx;
		border: 5upx solid #fff;
		box-shadow: 0 4upx 10upx rgba(220, 220, 220, 0.79);
	}

	.popup__trade .trade-main .goods-info .line-price {
		color: #777;
		font-size: 26upx;
		text-decoration: line-through;
		margin-left: 10upx;
	}

	.popup__trade .trade-main .goods-info .goods-stock {
		padding-left: 10upx;
		margin-top: 10upx;
		color: #777;
		font-size: 26upx;
	}

	.popup__trade .trade-main .goods-number {
		margin: 20upx 0;
		justify-content: space-between;
	}

	.popup__trade .trade-main .goods-number .tips-text {
		color: #888;
		background: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;
		font-size: 26upx;
	}

	/* 商品规格 */

	.goods-attr {
		padding: 10upx 0;
	}

	.goods-attr .goods-attr--scroll {
		max-height: 600upx;
	}

	.goods-attr .group-item .tips-text {
		font-size: 26upx;
		color: #888;
		margin-bottom: 10upx;
	}

	.goods-attr .group-item .spec-item {
		display: inline-block;
		font-size: 26upx;
		height: 55upx;
		line-height: 55upx;
		padding: 0 30upx;
		margin: 0 20upx 20upx 0;
		border-radius: 8upx;
		color: #888;
		border: 1upx solid #e6e6e6;
	}

	.goods-attr .group-item .spec-item.cur {
		background: #f82169;
		border: 1upx solid #f82169;
		color: #fff;
	}

	.goods-attr .group-item .spec-item.cur:after {
		position: absolute;
		bottom: 0;
		right: 0;
		content: '';
		display: inline-block;
		width: 16upx;
		height: 16upx;
	}

	.goods-attr .group-item .spec-item.disabled {
		color: #dedede;
		cursor: not-allowed;
		background: #eee;
		border: 2upx dashed #dedede;
	}

	.select-number {
		width: 202upx;
		height: 52upx;
		flex-direction: row;
		border: 1upx solid rgb(231, 231, 231);
		border-radius: 5upx;
	}

	.select-number .default {
		float: left;
		width: 60upx;
		height: 52upx;
		line-height: 48upx;
		padding: 0;
		background: #fff;
		color: #444;
		font-size: 40upx;
		border-radius: unset;
	}

	.select-number .disabled {
		background: #f7f7f7;
		color: #ddd;
	}

	.select-number button:after {
		content: none;
		border: none;
	}

	.select-number input {
		float: left;
		width: 80upx;
		height: 52upx;
		line-height: 52upx;
		border-right: 1upx solid #eee;
		border-left: 1upx solid #eee;
		text-align: center;
		font-size: 28upx;
		color: #444;
	}

	/* 弹窗 */
	.pop {
		visibility: hidden
	}

	.pop--show {
		visibility: visible
	}

	.pop__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 14;
		background: rgba(0, 0, 0, .5);
		display: none
	}

	.pop__mask--hide {
		background: 0 0
	}

	.pop__container {
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 15;
		opacity: 0
	}

	.pop--show .pop__container {
		opacity: 1
	}

	.pop--show .pop__mask {
		display: block
	}

	.pop--left .pop__container {
		left: 0;
		top: 50%;
		-webkit-transform: translate3d(-100%, -50%, 0);
		transform: translate3d(-100%, -50%, 0)
	}

	.pop--show.pop--left .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--right .pop__container {
		right: 0;
		top: 50%;
		left: auto;
		-webkit-transform: translate3d(100%, -50%, 0);
		transform: translate3d(100%, -50%, 0)
	}

	.pop--show.pop--right .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--bottom .pop__container {
		top: auto;
		left: 50%;
		bottom: 0;
		-webkit-transform: translate3d(-50%, 100%, 0);
		transform: translate3d(-50%, 100%, 0)
	}

	.pop--show.pop--bottom .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}

	.pop--top .pop__container {
		top: 0;
		left: 50%;
		-webkit-transform: translate3d(-50%, -100%, 0);
		transform: translate3d(-50%, -100%, 0)
	}

	.pop--show.pop--top .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
</style>
